<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery/jquery1.9/jquery-1.9.0.js"></script>
    <script>
        $(function(){
            // 1.直接使用事件名称方法
            $("#btn").click(function(){
                console.log("嘻嘻");
            });
            // 2.使用on()或者bind(),bind在3.0之后被删除了
            // jQuery对象.on("事件名",函数);
            // jQuery对象.on("事件名",函数);
            $("#btn").on("mouseover",function(){
                console.log("鼠标悬浮事件");
            });
            // $("#btn").bind("mouseover",function(){
            //     console.log("鼠标悬浮事件");
            // });

            // 3.使用on()或者bind()同时绑定多个事件
            // jQuery对象.on(对象);
            // jQuery对象.bind(对象);

            // $("#btn").on({
            //     click:function(){
            //         console.log("点击事件");
            //     },
            //     mouseover:function(){
            //         console.log("鼠标悬浮事件");
            //     },
            //     mouseout:function(){
            //         console.log("鼠标离开事件");
            //     }
            // });
            
            //4.复合事件（mouseenter和mouseleave）
            // $("#btn").hover(function(){
            //     console.log("悬浮");
            // },function(){
            //     console.log("离开");
            // });

            // 5.移除事件
            // jQuery对象.off("事件名1 事件名2")
            // jQuery对象.unbind("事件名 事件名2");unbind在3.0之后被删除了
            $("#btn2").click(function(){
                $("#btn").off("click mouseover");
            });

            //6.移除所有事件
            // jQuery对象.off()
            // jQuery对象.unbind()
            $("#btn3").click(function(){
                $("#btn").off();
            });
        });
    </script>
</head>
<body>
    <input type="button" value="绑定事件的多种方式" id="btn">
    <input type="button" value="移除点击事件" id="btn2">
    <input type="button" value="移除所有事件" id="btn3">

    
</body>
</html>